<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>灵瞳卫士</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        html, body {
            height: 100%;
        }
        .header{
            background: url("./assets/bg.png") no-repeat  top center/100%;
            position: fixed;
            top: 0;
            width: 100%;
            height: 80px;
            z-index: 999;
        }
        #app {
            width: 100%;
            background: url("./assets/bg.png") no-repeat top center/100%;
            background-color: black;
        }

        .row-box{
            width: 720px;
            margin: auto;
            padding-top:80px;
        }
        .col-box {
            float: left;
        }
        .health-code {
            position: relative;
        }

        .health-code .data-time {
            position: absolute;
            top: 91px;
            z-index: 9;
            left: 59px;
        }

        .health-code .data-imsi {
            position: absolute;
            top: 30px;
            z-index: 9;
            left: 58px;
        }

        .health-code .data-acidtest-result {
            position: absolute;
            top: 296px;
            z-index: 9;
            left: 56px;
        }

        .health-code .data-vaccination {
            position: absolute;
            top: 296px;
            z-index: 9;
            left: 153px;
        }

        .health-code .data-acidtest-time {
            position: absolute;
            top: 324px;
            z-index: 1;
            left: 28px;
            font-size: 8px;
        }

        .health-code .data-error-code {
            position: absolute;
            top: 170px;
            z-index: 1;
            left: 74px;
            font-size: 12px;
        }
        #code-img {
            width: 218px;
            margin: 10px 10px;
        }
    </style>
</head>
<body>
      <div class="header">
      </div>
      <div style="clear:both;"></div>
    <div id="app">
        <div class="row-box">
            <div class="col-box" :span="6" v-for="fit in tableData" :key="fit.imsi">
                <div class="health-code">
                    <div class="data-time">
                        <span class="date" v-text="date"></span>
                        &nbsp;<span class="time" v-text="time"></span>
                    </div>
                    <div class="data-imsi">
                        <span class="imsi" v-text="fit.imsi"></span>
                    </div>
                    <div class="data-acidtest-result">
                            <span class="acidtest_result"
                                  v-if="fit.acidtestResult != null && fit.acidtestResult != ''"
                                  v-text="fit.acidtestResult"></span>
                        <span class="acidtest_result" v-else>暂无</span>
                    </div>
                    <div class="data-vaccination">
                            <span class="vaccination" v-if="fit.vaccination != null && fit.vaccination != ''"
                                  v-text="fit.vaccination"></span>
                        <span class="vaccination" v-else>暂无</span>
                    </div>
                    <div class="data-acidtest-time">
                        <span class="acidtest-time" v-text="fit.acidtestTime"></span>
                    </div>
                    <div class="data-error-code">
                            <span class="error-code"
                                  v-if="fit.healthcodeState == 'O'">未获取到有效数据</span>
                    </div>
                    <img
                            id="code-img"
                        :src="fit.healthcodeState == 'G' ? greenUrl : fit.healthcodeState == 'R' ? redUrl : fit.healthcodeState == 'Y' ? yellowUrl : errorUrl"
                    />
                </div>
            </div>
            <div style="clear: both;"></div>
        </div>
    </div>

<script>
    window.onload = function () {
        var vue = new Vue({
            el: '#app',
            data: {
                time: '',
                date: '',
                tableData: [],
                greenUrl: "../assets/healthcode_state_green.png",
                redUrl: "../assets/healthcode_state_red.png",
                yellowUrl: "../assets/healthcode_state_yellow.png",
                errorUrl: "../assets/healthcode_state_error.png",
            },
            created() {
                this.healthCodeInfo()
            },
            mounted() {
                setInterval(this.updateTime, 1000);
                this.updateTime();

                if (this.timer) {
                    clearInterval(this.timer)
                } else {
                    this.timer = setInterval(() => {
                        this.healthCodeInfo()
                    }, 1000 * 5)
                }
            },
            destroyed() {
                clearInterval(this.timer)
            },
            methods: {
                zeroPadding(num, digit) {
                    var zero = '';
                    for (var i = 0; i < digit; i++) {
                        zero += '0';
                    }
                    return (zero + num).slice(-digit);
                },
                updateTime() {
                    var cd = new Date();
                    this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
                    this.date = this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2);
                },
                healthCodeInfo() {
                    axios.post("http://192.168.30.102:8081/device/data/getDate", null)
                        .then(res => {
                            this.tableData = res.data.data
                            console.log('data', this.tableData)
                        })
                }
            }
        })
    }
</script>
</body>
</html>